<!--
 * @Author: 奶龙也是龙 15104937352@163.com
 * @Date: 2025-09-11 08:41:10
 * @LastEditors: 奶龙也是龙 15104937352@163.com
 * @LastEditTime: 2025-09-17 15:58:33
 * @FilePath: \大三前端\city\src\pages\components\Bottom3.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->

<template>
    <div>
        <Title :title="title"></Title>
        <!-- 1.提供图标容器 -->
        <div ref="bottom3" style="height: 150px;margin-top: 30px;"></div>
    </div>
</template>
<script>
import { Liquid } from '@antv/g2plot';
export default {
    data() {
        return {
            title: '今日降水概率'
        }
    },
    methods: {
        loadLine() {
            const liquidPlot = new Liquid(this.$refs.bottom3, {
                percent: 0.6542,
                shape: function (x, y, width, height) {
                    const r = width / 4;
                    const dx = x - width / 2;
                    const dy = y - height / 2;
                    return [
                        ['M', dx, dy + r * 2],
                        ['A', r, r, 0, 0, 1, x, dy + r],
                        ['A', r, r, 0, 0, 1, dx + width, dy + r * 2],
                        ['L', x, dy + height],
                        ['L', dx, dy + r * 2],
                        ['Z'],
                    ];
                },
                shapeStyle: {
                    fill: 'pink',
                },
                outline: {
                    border: 4,
                    distance: 8,
                },
                wave: {
                    length: 128,
                },
            });

            liquidPlot.render();
        }
    },
    mounted(){
    this.loadLine();
    }
}
</script>
<style scoped></style>